import React from 'react'
import PropType from 'prop-types'
import styles from './index.less'
import { Icon, Row, Col, Tag, Select } from 'antd'

class Superscript extends React.Component {
    state = {
        second: [],
        third: [],
        fourth: [],
        displaySuperscript: false,
        value: '',
    };

    _onBlurHandler() {
        this.setState({ displaySuperscript: false })
        this.props.onBlur && this.props.onBlur();
    }

    //创建组件添加document监听
    componentDidMount() {
        document.addEventListener('click', (e) => { this._onBlurHandler() }, false);
    }

    //创建组件移除document监听
    // componentWillUnmount() {
    //     document.removeEventListener('click', (e) => { this._onBlurHandler() }, false);
    // }

    //选择子级或者值
    selectChildren = (e, item, child) => {
        e.nativeEvent.stopImmediatePropagation();
        if (item.children) {
            if (child === 'second') {
                this.setState({
                    third: [],
                    fourth: [],
                })
            } else if (child === 'third') {
                this.setState({
                    fourth: [],
                })
            }
            this.setState({
                [child]: item.children
            })
        } else {
            this.props.onChange(item);
            this.setState({ value: item.label })
            this.setState({ displaySuperscript: false })
        }
    }

    //清空选择
    clearSelect = () => {
        this.props.onChange({
            label:'',
            value:'',
            type:'',
            parendId: '',
        });
        this.setState({ value: '' })
    }

    //点击显示隐藏级联
    clickSelect = (e) => {
        e.nativeEvent.stopImmediatePropagation();
        this.setState({
            displaySuperscript: !this.state.displaySuperscript
        })
    }

    render() {
        const { options, onChange, style = {}, allowClear, placeholder } = this.props;

        if (this.props.value !== undefined) this.state.value = this.props.value

        const { second, third, fourth, value, displaySuperscript } = this.state;

        return (
            <div className={styles.superscriptContainer} style={style}>
                <div onClick={this.clickSelect}>
                    <Select
                        allowClear={allowClear}
                        placeholder={placeholder}
                        className={styles.select}
                        value={value}
                        notFoundContent={""}
                        dropdownClassName={styles.dropdown}
                        onChange={this.clearSelect}
                    ></Select>
                </div>
                {
                    displaySuperscript && <div className={styles.superscript}>
                        <ul>
                            {
                                options && options.map((item, i) => {
                                    return (
                                        <li
                                            key={i}
                                            className={styles.rightIconLi}
                                            onClick={(e) => { this.selectChildren(e, item, 'second') }}>
                                            <div className={styles.label}>{item.label}</div>
                                            {item.children && <Icon type="right" />}
                                        </li>
                                    )
                                })
                            }
                        </ul>
                        {
                            second && <ul>
                                {
                                    second.map((item, i) => {
                                        return (
                                            <li
                                                key={i}
                                                className={styles.rightIconLi}
                                                onClick={(e) => { this.selectChildren(e, item, 'third') }}>
                                                <div className={styles.label}>{item.label}</div>
                                                {item.children && <Icon type="right" />}
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        }
                        {
                            third && <ul>
                                {
                                    third.map((item, i) => {
                                        return (
                                            <li
                                                key={i}
                                                className={styles.rightIconLi}
                                                onClick={(e) => { this.selectChildren(e, item, 'fourth') }}>
                                                <div className={styles.label}>{item.label}</div>
                                                {item.children && <Icon type="right" />}
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        }
                        {
                            fourth && <ul>
                                {
                                    fourth.map((item, i) => {
                                        let superscriptColor;
                                        switch (item.type) {
                                            case 2:
                                                superscriptColor = 'red'
                                                break;
                                            case 3:
                                                superscriptColor = 'green'
                                                break;
                                            case 4:
                                                superscriptColor = 'blue'
                                                break;
                                            default:
                                                superscriptColor = 'transparent'
                                        }
                                        return (
                                            <li
                                                key={i}
                                                className={styles.fourthLi}
                                                onClick={(e) => { this.selectChildren(e, item) }}>
                                                <div className={styles.fourthLabel}>{item.label}</div>
                                                <div className={styles.superscriptIcon} style={{ borderTopColor: superscriptColor }}></div>
                                            </li>
                                        )
                                    })
                                }
                            </ul>
                        }
                    </div>
                }
            </div>
        )
    }

}

export default Superscript